<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <!-- <mt-input></mt-input> -->
    <renders :level = '2'>
      <span>Hello</span>
      <p slot = 'header'>
       header
      </p>
       <p slot = 'footer'>
         footer
      </p>
    </renders>
    <models v-model="componentsModel"></models>
    <syncs :foo.sync="bar"></syncs>
    <el-button @click="getModel">v-model</el-button>
    <div class = "button"></div>
  </div>
</template>

<script>
import mtInput from './mt-input/mt-input'

import renders from './renders.vue'
import models from './model.vue'
// import Vue from 'vue'
import syncs from './sync.vue'

export default {
  components: {
    renders,
    models,
    syncs,
    mtInput
  },
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      visible2: false,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      componentsModel: '',
      bar: '123'
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log(data)
    },
    getModel () {
      console.log(this.bar)
    },
    symbols () {
      var randoms = {
        [Symbol.iterator]: function () {
          return {
            next: function () {
              return {
                value: Math.random()
              }
            }
          }
        }
      }
      var random_pool = []
      for (var n of randoms) {
        console.log(n)
        random_pool.push(n)
        if (random_pool.length === 100)
          break
      }
    },
    some () {
      let arr = [1,2,3,4]
      let arrSome = arr.some((item, index, array ) => {
        // console.log(item)
        // console.log(index)
        // console.log(array)
        return item > 3
      })
      console.log(arrSome)
    }
  },
  mounted () {
    // this.symbols()
    this.some()
    document.querySelector('.button').onmousemove = (e) => {
      const x = e.pageX - e.target.offsetLeft
      const y = e.pageY - e.target.offsetTop
      e.target.style.setProperty('--x', `${x}px`)
      e.target.style.setProperty('--y', `${y}px`)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.button {
    position: relative;
    appearance: none;
    background: #f72359;
    padding: 1em 2em;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
    width:var(--size);
    span {
      position: relative;
    }
    transition: width 1s ease, height 1s ease;
    &::before {
      --size: 0;
      content: '';
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: var(--size);
      height: var(--size);
      background: radial-gradient(circle closest-side, #4405f7, transparent);
      transform: translate(-50%, -50%);
      transition: width .2s ease, height .2s ease;
    }

    &:hover::before {
      --size: 400px;
    }
  }
</style>
